JavaScript 设计模式之单例模式

Author Avatar
Klein 8月 27, 2018

介绍

  • 系统中唯一被使用
  • 一个类只有一个实例

示例

  • 登录框
  • 购物车

类图

说明

  • 单例模式需要用到 Java 的特性（private）
  • es6 中没有

JS 中使用单例模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class SingleObject {
    login () {
        console.log('login...');
    }
}
SingleObject.getInstance = (function () {
    let instance
    return function() {
        if (!instance) {
            instance = new SingleObject();
        }
        return instance
    }
})

// 测试
// 注意：这里只能使用静态方法 getInstance ， 而不能 new SingleObject()。
// 但是 new SingleObject() 也不会报错
let obj1 = SingleObject.getInstance()
obj1.login()
// login...
let obj2 = SingleObject.getInstance()
obj2.login()
// login...
console.log('obj1 === obj2:', obj1 === obj2); // 实际上都是同一个对象
// obj1 === obj2: true

// 以下是错误的使用方法：
let obj3 = new SingleObject()
obj3.login()
console.log('obj1 === obj3:', obj1 === obj3); // 实际上都是同一个对象
// obj1 === obj3: false

场景

jQuery 只有一个 $

1
2
3
4
5
if(window.jQuery != null) {
    return window.jQuery
} else {
    // 初始化...
}

模拟登录框

设计原则验证